<template>
  <div class="marketDetails">
    <Back>
      <b slot="title">
        {{this.$route.params.xiaoming.text|filter}}
      </b>
    </Back>
    <div class="container">
      <img :src="this.$route.params.xiaoming.imgurl" alt="" class="title" />
      <h1>
        <p>{{this.$route.params.xiaoming.text}}</p>
        <p>
          <span>{{this.$route.params.xiaoming.price}}</span>
          <span>销量：{{this.$route.params.xiaoming.sellcount}}</span>
        </p>
      </h1>
      <div class="empty"></div>
      <h2>
        <p>
          <i class="iconfont icon-shuyej"></i>
          <i>商品详情</i>
        </p>
        <img src="@/assets/img/xq1.png" alt="" />
        <img src="@/assets/img/xq2.png" alt="" />
        <img src="@/assets/img/xq3.png" alt="" />
        <p>
          <i class="iconfont icon-shuyej"></i>
          <i>使用方法</i>
        </p>
        <img src="@/assets/img/ff1.png" alt="" />
        <img src="@/assets/img/fangfa1.png" alt="" />
        <img src="@/assets/img/fangfa2.png" alt="" />
      </h2>
      <MarketQuestion />
      <MarketDetailYuan />
    </div>
    
    <ul class="marketfooter">
      <li>
        <i class="iconfont icon-kefu"></i>
        <span>客服</span>
      </li>
      <li>
        <i class="iconfont icon-shoucang"></i>
        <span>收藏</span>
      </li>
      <li @click="show = true">加入购物车</li>
      <li>购买</li>
    </ul>

<van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :message-config="messageConfig"
     @buy-clicked="fun()"
    />

  </div>
</template>

<script>
import Back from "../components/back.vue";
import MarketQuestion from "../components/marketQuestion.vue";
import MarketDetailYuan from "../components/marketDetailYuan.vue";
export default {
  props:[
  ],
  data(){
    return{
      show: false,
      sku: {
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "红色", // skuValueName：规格值名称
                imgUrl: "https://kaola-pop.oss.kaolacdn.com/5d0b6fdb7fbf43c6a9aa82c8c40c7f15_800_800.jpg?x-oss-process=image/resize,w_800/quality,q_85", // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: "https://kaola-pop.oss.kaolacdn.com/5d0b6fdb7fbf43c6a9aa82c8c40c7f15_800_800.jpg?x-oss-process=image/resize,w_800/quality,q_85", // 用于预览显示的规格类目图片
              },
              {
                id: "2",
                name: "蓝色",
                imgUrl: "https://kaola-pop.oss.kaolacdn.com/802676ea7952417ca9d3a9f20de3ab80_800_800.jpg?x-oss-process=image/resize,w_800/quality,q_85",
                previewImgUrl: "https://kaola-pop.oss.kaolacdn.com/802676ea7952417ca9d3a9f20de3ab80_800_800.jpg?x-oss-process=image/resize,w_800/quality,q_85",
              },
              {
                id: "3",
                name: "黑色",
                imgUrl: "https://kaola-pop.oss.kaolacdn.com/25aec582987743a1a520917e9b259dc4_800_800.jpg?x-oss-process=image/resize,w_800/quality,q_85",
                previewImgUrl: "https://kaola-pop.oss.kaolacdn.com/25aec582987743a1a520917e9b259dc4_800_800.jpg?x-oss-process=image/resize,w_800/quality,q_85",
              },
            ],
            largeImageMode: true, //  是否展示大图模式
          },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 2261, // skuId
            s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "2", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 200, // 价格（单位分）
            stock_num: 120, // 当前 sku 组合对应的库存
          },
          {
            id: 2261, // skuId
            s1: "3", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "3", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 3400, // 价格（单位分）
            stock_num: 320, // 当前 sku 组合对应的库存
          },
         
        ],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        // messages: [
        //   {
        //     // 商品留言
        //     datetime: "0", // 留言类型为 time 时，是否含日期。'1' 表示包含
        //     multiple: "0", // 留言类型为 text 时，是否多行文本。'1' 表示多行
        //     name: "留言", // 留言名称
        //     type: "text", // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
        //     required: "1", // 是否必填 '1' 表示必填
        //     placeholder: "", // 可选值，占位文本
        //     extraDesc: "", // 可选值，附加描述文案
        //   },
        // ],
        hide_stock: false, // 是否隐藏剩余库存
      },
      goods: {
        picture: "https://kaola-pop.oss.kaolacdn.com/5d0b6fdb7fbf43c6a9aa82c8c40c7f15_800_800.jpg?x-oss-process=image/resize,w_800/quality,q_85",
      },
      messageConfig: {
        // 图片上传回调，需要返回一个promise，promise正确执行的结果需要是一个图片url
        uploadImg: () => {
          return new Promise((resolve) => {
            setTimeout(
              () =>
                resolve(
                  "https://img01.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg"
                ),
              1000
            );
          });
        },
        // 可选项，自定义图片上传逻辑，使用此选项时，会禁用原生图片选择
        customUpload: () => {
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve("https://img01.yzcdn.cn/vant/leaf.jpg");
            }, 1000);
          });
        },
        // 最大上传体积 (MB)
        uploadMaxSize: 3,
        // placeholder 配置
        placeholderMap: {
          text: "xxx",
          tel: "xxx",
        },
        // 初始留言信息
        // 键：留言 name
        // 值：留言内容
        initialMessages: {
          留言: "留言信息",
        },
      },
    }
  },
  components: {
    Back,
    MarketQuestion,
    MarketDetailYuan,
  },
  mounted(){
    console.log(this.$route.params.xiaoming.price);
  },
  filters:{
    filter(val){
          if(val.length>12){
            return  val.substr(0,12)+"..."
          }else{
            return  val
          }
      }
  }
};
</script>

<style scoped>
b{
  font-size: .2rem;
  font-weight: 700;
}
.icon-shuyej {
  padding-right: .1rem;
  float: left;
  font-size: 0.28rem;
  color: green;
}
.container {
  margin-top: .65rem;
  margin-bottom: 0.6rem;
}
h2 {
  margin: 0 0.2rem;
}
h2 img {
  width: 100%;
}
h2 p {
  height: 0.6rem;
  line-height: 0.6rem;
  font-size: 0.2rem;
  font-weight: 700;
}
h2 p i {
  float: left;
}
.title {
  height: 2.2rem;
  width: 100%;
}
h1 {
  padding: 0 0.2rem;
  height: 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
}
.empty {
  height: 0.1rem;
  background-color: rgb(235, 231, 231);
}
h1 p:nth-child(1) {
  font-weight: 700;
  color: #666;
}
h1 p:nth-child(2) span:nth-child(1) {
  font-size: 0.2rem;
  color: red;
  margin-right: 0.2rem;
}
h1 p:nth-child(2) span:nth-child(2) {
  font-size: 0.12rem;
  color: #999;
}

.marketfooter .iconfont{
  font-size: .24rem;
}
.marketfooter {
    width: 100%;
  height: 0.5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 0.01rem solid #999;
  font-weight: 550;
  position: fixed;
  bottom: 0;
  background-color: #fff;
}
.marketfooter li {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.marketfooter li:nth-child(1) {
  width: 0.6rem;
}
.marketfooter li:nth-child(2) {
  width: 65px;
  border-left: 0.01rem solid #999;
  border-right: 0.01rem solid #999;
}
.marketfooter li:nth-child(3){
    flex: 1;
}
.marketfooter li:nth-child(4) {
  width: 1.25rem;
  background-color: rgb(243, 109, 109);
  color: #ffff;
}
</style>